---
title: Безголовый WordPress и Astro
description: Добавьте контент в проект Astro, используя WordPress в качестве CMS
type: cms
stub: false
service: WordPress
i18nReady: true
---
import { FileTree } from '@astrojs/starlight/components';
import Grid from '~/components/FluidGrid.astro'
import Card from '~/components/ShowcaseCard.astro'

[WordPress](https://wordpress.org/) — это система управления контентом, которая включает в себя собственный фронтенд, но также может быть использована в качестве безголовой CMS для обеспечения контентом вашего проекта Astro.

## Интеграция с Astro

WordPress поставляется со встроенным [WordPress REST API](https://developer.wordpress.org/rest-api/) для подключения ваших данных WordPress к Astro. Вы можете дополнительно установить [WPGraphQL](https://wordpress.org/plugins/wp-graphql/) или [Gato GraphQL](https://wordpress.org/plugins/gatographql/) на свой сайт, чтобы использовать GraphQL.

### Предварительные условия

Чтобы начать работу, вам потребуется следующее:

1. **Проект Astro** — Если у вас еще нет проекта Astro, наше [Руководство по установке](/ru/install/auto/) поможет вам быстро начать работу.
2. **Сайт WordPress** — REST API вашего сайта находится по адресу `[ВАШ_САЙТ]/wp-json/wp/v2/` и доступен по умолчанию на любом сайте WordPress. Также можно [установить WordPress в локальной среде](https://wordpress.org/support/article/installing-wordpress-on-your-own-computer/).

### Настройка учетных данных

По умолчанию ваш WordPress REST API доступен для внешних запросов на получение данных без аутентификации. Это не позволяет пользователям изменять ваши данные или настройки сайта и позволяет вам использовать данные в вашем проекте Astro без каких-либо учетных данных.

При необходимости вы можете [требовать аутентификацию](https://developer.wordpress.org/rest-api/frequently-asked-questions/#require-authentication-for-all-requests).

### Получение данных

Получите данные WordPress через уникальный URL REST API вашего сайта и маршрут для вашего контента. (Для блога это обычно `posts`.) Затем вы можете рендерить свойства данных с помощью директивы Astro `set:html={}`. 

Например, чтобы отобразить список заголовков постов и их содержимого:

```astro title="src/pages/index.astro"
---
const res = await fetch("https://[ВАШ САЙТ]/wp-json/wp/v2/posts");
const posts = await res.json();
---
<h1>Astro + WordPress 🚀</h1>
{
  posts.map((post) => (
      <h2 set:html={post.title.rendered} />
      <p set:html={post.content.rendered} />
  ))
}
```

WordPress REST API включает в себя [глобальные параметры](https://developer.wordpress.org/rest-api/using-the-rest-api/global-parameters/), такие как `_fields` и `_embed`. 

Через этот API доступно большое количество данных, поэтому вы можете захотеть получить только определенные поля. Вы можете ограничить ответ, добавив параметр [`_fields`](https://developer.wordpress.org/rest-api/using-the-rest-api/global-parameters/#_fields) в URL API, например: `[ВАШ САЙТ]/wp/v2/posts?_fields=author,id,excerpt,title,link`. 

API также может возвращать контент, связанный с вашим постом, например, ссылку на родительский пост или на комментарии к нему. Вы можете добавить параметр [`_embed`](https://developer.wordpress.org/rest-api/using-the-rest-api/global-parameters/#_embed) к URL API (например, `[ВАШ САЙТ]/wp/v2/posts?_embed`), чтобы указать серверу, что ответ должен включать эти встроенные ресурсы.

## Создание блога с помощью WordPress и Astro

Этот пример извлекает данные из публичного WordPress API [https://norian.studio/dinosaurs/](https://norian.studio/dinosaurs/). Этот WordPress-сайт хранит информацию об отдельных динозаврах в маршруте `dinos`, точно так же, как блог хранит отдельные записи в маршруте `posts`.

В этом примере показано, как воспроизвести эту структуру сайта в Astro: индексная страница со списком динозавров и ссылками на динамически генерируемые страницы отдельных динозавров.

:::note
Чтобы использовать [Пользовательских типов записей (CPT)](https://learn.wordpress.org/lesson-plan/custom-post-types/) в API WordPress (а не только `post` и `page`), вам придется [настроить их в приборной панели WordPress](https://stackoverflow.com/questions/48536646/how-can-i-get-data-from-custom-post-type-using-wp-rest-api) или [добавить поддержку REST API для пользовательских типов контента](https://developer.wordpress.org/rest-api/extending-the-rest-api/adding-rest-api-support-for-custom-content-types/) в WordPress.

В этом примере мы получаем данные с сайта WordPress, типы контента которого уже настроены и доступны для REST API.
:::

### Отображение списка постов WordPress

На странице `src/pages/index.astro" перечислены все динозавры с описанием и ссылкой на их собственную страницу.

<FileTree title="Project Structure">
- src/
  - pages/
    - **index.astro**
    - dinos/
      - [slug].astro
- astro.config.mjs
- package.json
</FileTree>

При получении через API возвращается объект, содержащий свойства:

- `title.rendered` - Содержит HTML-рендеринг заголовка поста.
- `content.rendered` - Содержит HTML-рендеринг содержимого поста.
- `slug` - Содержит слаг поста. (Это ссылка на динамически генерируемые страницы отдельных динозавров).

```astro title="/src/pages/index.astro"
---
import Layout from "../layouts/Layout.astro";

let res = await fetch("https://norian.studio/wp-json/wp/v2/dinos");
let posts = await res.json();
---
<Layout title="Dinos!">
  <section>
    <h1>List of Dinosaurs</h1>
    {
      posts.map((post) => (
        <article>
          <h2>
            <a href={`/dinos/${post.slug}/`} set:html={post.title.rendered} />
          </h2>
          <Fragment set:html={post.content.rendered} />
        </article>
      ))
    }
  </section>
</Layout>
```

### Использование WordPress API для генерации страниц

Страница `src/pages/dinos/[slug].astro [динамически генерирует страницу](/ru/guides/routing/#динамические-маршруты) для каждого динозавра.


```astro title="/src/pages/dinos/[slug].astro"
---
import Layout from '../../layouts/Layout.astro';

const { slug } = Astro.params;

let res = await fetch(`https://norian.studio/wp-json/wp/v2/dinos?slug=${slug}`);
let [post] = await res.json();

// Функция getStaticPaths() необходима для статических сайтов Astro.
// Если вы используете SSR, эта функция вам не понадобится.
export async function getStaticPaths() {
  let data = await fetch("https://norian.studio/wp-json/wp/v2/dinos");
  let posts = await data.json();

  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post: post },
  }));
}
---
<Layout title={post.title.rendered}>
  <article>
    <h1 set:html={post.title.rendered} />
    <Fragment set:html={post.content.rendered} />
  </article>
</Layout>
```

### Возврат встроенных ресурсов

Параметр запроса `_embed` указывает серверу вернуть связанные (встроенные) ресурсы.

```astro title="src/pages/dinos/[slug].astro" /&_embed/
---
const { slug } = Astro.params;

let res = await fetch(`https://norian.studio/wp-json/wp/v2/dinos?slug=${slug}&_embed`);
let [post] = await res.json();
---
```

Возвращается свойство `_embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url`, которое может быть использовано для отображения тематического изображения на каждой странице динозавра. (Замените `medium` на желаемый размер изображения).

```astro title="/src/pages/dinos/[slug].astro" {3}
<Layout title={post.title.rendered}>
  <article>
    <img src={post._embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url} />
    <h1 set:html={post.title.rendered} />
    <Fragment set:html={post.content.rendered} />
  </article>
</Layout>
```

### Публикация вашего сайта

Для развертывания сайта посетите наши [руководства по развертыванию](/ru/guides/deploy/) и следуйте инструкциям для выбранного вами хостинг-провайдера.

## Ресурсы сообщества 

- [Построение веб-сайта Astro с WordPress в качестве головного CMS](https://blog.openreplay.com/building-an-astro-website-with-wordpress-as-a-headless-cms/) от Chris Bongers.
- [Построение с Astro x WordPress ](https://www.youtube.com/watch?v=Jstqgklvfnc) на стриме Бена Холмса.
- [Построение сайта на Astro с WordPress в качестве API ](https://developers.wpengine.com/blog/building-a-headless-wordpress-site-with-astro) от Jeff Everhart.
- [Astro и WordPress как API](https://darko.io/posts/wp-as-an-api/) от Darko Bozhinovski.

## Сайты в производстве

Следующие сайты используют Astro + WordPress в производстве:

- [Soft Hard System](https://softhardsystem.com/) от Rafid Muhymin Wafi — [исходный код на GitHub](https://github.com/RafidMuhymin/softhardsystem)
- [Dinos!](https://wc-dinos.netlify.app/) от Anindo Neel Dutta - [исходный код на GitHub](https://github.com/leen-neel/astro-wordpress)

## Темы

<Grid>
  <Card title="Astro WordPress Starter" href="https://astro.build/themes/details/astro-wordpress-starter/" thumbnail="astro-wordpress-starter.png"/>
</Grid>